<template>
  <view v-if="shenheStatus == 0" style="background-color: rgb(247, 248, 250)">
    <view
      class="member_container"
      :style="{
        paddingTop: statusBarHeight + 'px',
        backgroundImage: `url(${asyncImgs.member.bg})`
      }"
    >
      <view class="fixed_nv">
        <!-- #ifndef MP-ALIPAY -->
        <u-icon name="arrow-left" class="back_icon" @click="toBack"></u-icon>
        <!-- #endif -->
        <text>{{ $t("member.title") }}</text>
      </view>
      <view class="user_info flex-y-center">
        <image
          class="avatar"
          :src="memberInfo.user_info.avatar_url"
          mode="aspectFill"
        ></image>
        <view style="margin-left: 20rpx">
          <view style="color: #faf2db; margin-bottom: 10rpx">{{
            memberInfo.user_info.nickname
          }}</view>
          <view style="display: flex; align-items: center">
            <view class="level_box">
              {{ memberInfo.user_info.level_name }}
            </view>

            <view style="margin-left: 20rpx; font-size: 24rpx"
              >有效期：{{ memberInfo.user_info.user_level_expires }}</view
            >
          </view>
        </view>
      </view>
      <view class="">
        <u-swiper
          v-if="is_show"
          :list="list"
          :showInfo="true"
          :currentLevel="currentLevel"
          :height="300"
          :mode="'none'"
          :circular="false"
          :autoplay="false"
          :border-radius="10"
          :sMoney="memberInfo.s_money"
          :percent="memberInfo.percent"
          :nextLevel="memberInfo.next_level"
          :effect3d="true"
          :bg-color="'#25272f'"
          @change="currentSwiperChange"
        ></u-swiper>
      </view>
      <view style="padding: 24rpx; padding-bottom: 60rpx">
        <view style="height: 30rpx; line-height: 30rpx; margin-bottom: 40rpx">
          {{ currentItem.name }}{{ $t("member.enjoy")
          }}{{ currentItem.synopsis.length }}{{ $t("member.rights") }}
          <!-- <text style="float: right;color: gray;">展开</text> -->
        </view>

        <view class="number-content">
          <view
            class="item"
            v-for="(item, index) in currentItem.synopsis"
            :key="index"
          >
            <view class="box">
              <view class="img">
                <image :src="item.pic" mode="aspectFill"></image>
              </view>
              <scroll-view scroll-y class="main_view">
                <view class="main_text">
                  {{ item.title }}
                </view>
                <view class="sub_text">{{ item.content }}</view>
              </scroll-view>
            </view>
          </view>
        </view>
        <!-- <u-row gutter="10">
          <u-col
            span="4"
            v-for="(item, index) in currentItem.synopsis"
            :key="index"
            style="margin:10rpx 0;"
          >
            <view
              class="col_box"
              :style="{ backgroundImage: `url(${item.pic})` }"
            >
              <scroll-view scroll-y class="main_view">
                <view class="main_text">
                  {{ item.title }}
                </view>
                <view class="sub_text">{{ item.content }}</view>
              </scroll-view>
            </view>
          </u-col>
        </u-row> -->
      </view>
    </view>
    <view class="bottom_box">
      <view class="">{{ $t("member.growth") }}</view>
      <view class="grou_up">
        <view>
          <image
            :src="asyncImgs.member.icon01"
            mode=""
            style="width: 80rpx; height: 60rpx"
          ></image>
        </view>
        <view>
          <view>{{ $t("member.pay") }}</view>
          <view style="color: #9e9e9e; font-size: 20rpx">{{
            $t("member.order")
          }}</view>
        </view>
        <view>
          <view
            class="s_btm"
            @click="$utils.toUrl('/pages/home/home', 'switchtab')"
            >{{ $t("member.buy") }}</view
          >
        </view>
      </view>
    </view>
    <view
      class="bottom_action_btn"
      :style="{ backgroundImage: `url(${asyncImgs.member.btn})` }"
      v-if="
        currentLevel < (list[currentItemIndex] && list[currentItemIndex].level)
      "
    >
      <text style="padding-left: 60rpx; color: #6f3e16">
        {{ currentItem.name }} ￥
        <text style="font-size: 34rpx; font-weight: bold">{{
          currentItem.price
        }}</text>
        <!-- <text style="text-decoration: line-through;font-size: 24rpx;">￥179</text> -->
      </text>
      <text
        style="float: right; color: #fde1c8; margin-right: 60rpx"
        @click="memberSubmit"
        >{{ $t("member.open") }}</text
      >
    </view>
    <div class="footNav" v-if="useFoot">
      <template v-for="(item, index) in controls">
        <footNav
          v-if="item.type == 'foot_nav'"
          :key="index"
          :param="item.param"
        ></footNav>
      </template>
    </div> </view
  ><Shenhe v-else-if="shenheStatus == 1" :isShowTitle="true"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";

export default {
  components: { Shenhe },
  data() {
    return {
      // #ifdef MP-WEIXIN
      pay_type: 1, // 1,微信支付,4支付宝支付
      // #endif
      // #ifdef MP-ALIPAY
      pay_type: 4, // 1,微信支付,4支付宝支付
      // #endif
      is_show: true,
      currentItemIndex: 0,
      currentLevel: "-1",
      memberInfo: {
        user_info: {},
        s_money: "",
        percent: "",
        next_level: {}
      },
      list: [],
      useFoot: false
    };
  },
  computed: {
    currentItem() {
      return (
        this.list[this.currentItemIndex] || {
          name: "",
          synopsis: []
        }
      );
    }
  },
  methods: {
    // 返回上级页面
    toBack() {
      this.$utils.toUrl("/pages/my/my", "switchtab");
    },
    currentSwiperChange(index) {
      this.currentItemIndex = index;
    },
    // 点击购买
    async memberSubmit() {
      let params = {
        level_id: this.list[this.currentItemIndex].id //会员id
      };
      // #ifdef APP-PLUS
      params._from = "app";
      // #endif
      // #ifndef APP-PLUS
      params._from = "mini";
      // #endif
      try {
        const res = await this.$allrequest.user.member_buy(params);
        let price = this.list[this.currentItemIndex].price;

        let formData = {
          createDate: res.data.add_time, //订单创建时间戳
          backUrl: "/user/member/member_center", //返回路径
          payData: {
            pay_type: this.pay_type,
            order_id: res.data.order_id,
            order_id_list: ""
          }, // 订单参数
          pay_type_list: this.memberInfo.pay_type_list, //支付类型列表
          isMember: true, //会员
          pay_price: price
        };
        // 跳转收银台
        this.$utils.toUrl(`/other/pay/pay?data=${JSON.stringify(formData)}`);
      } catch (e) {
        //TODO handle the exception
      }
    },
    async getMemberInfo() {
      try {
        const params = {
          _form: ""
        };

        //#ifdef H5
        params._form = "h5";
        //#endif
        //#ifdef APP-PLUS
        params._form = "app";
        //#endif

        const res = await this.$allrequest.user.user_member(params);
        this.memberInfo = res.data;
        this.currentLevel = res.data.user_info.level + "";
        let swiperList = {
          buy_prompt: this.$t("member.permanent"),
          detail: this.$t("member.gold"),
          id: "-1",
          image: this.asyncImgs.member.bg_1,
          level: "-1",
          name: this.$t("member.ordinary"),
          price: "0.00",
          synopsis: []
        };

        this.list = [swiperList, ...res.data.list];
        this.currentItemIndex = this.$refs["swiper"].current;
      } catch (e) {
        //TODO handle the exception
      }
    }
  },
  onPageScroll(e) {},
  onShow() {
    this.getMemberInfo();
    setTimeout(() => {
      try {
        this.useFoot = this.$utils.useFoot(this.controls);
      } catch (e) {}
    }, 500);
  }
};
</script>

<style scoped lang="less">
.swiperSlot {
  position: absolute;
  top: 0;
  left: 0;
}

.s_btm {
  background: #ffffff;
  border: 1px solid #ff6a07;
  border-radius: 28rpx;
  color: #ff6a07;
  text-align: center;
  height: 50rpx;
  line-height: 50rpx;
}

.grou_up {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  height: 120rpx;
  line-height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  > view:nth-child(1) {
    flex: 2;
    display: flex;
  }
  > view:nth-child(2) {
    line-height: 30rpx;
    flex: 7;
  }
  > view:nth-child(3) {
    flex: 3;
  }
}

.level_box {
  padding: 2rpx 0rpx;
  background: #313144;
  width: 120rpx;
  border: 1px solid #b0aba3;
  border-radius: 14px;
  color: #faf5de;
  text-align: center;
  font-size: 20rpx;
}

.bottom_action_btn {
  font-size: 26rpx;
  line-height: 95rpx;
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
  height: 95rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.bottom_box {
  padding: 40rpx;
  min-height: 600rpx;
  background-color: rgb(247, 248, 250);
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  transform: translateY(-20rpx);
}

.col_box {
  position: relative;
  overflow: hidden;

  width: 100%;
  background-color: rgba(255, 255, 255, 0.15);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: 50% 40%;
  height: 160rpx;
  border-radius: 32rpx;
}

.user_info {
  padding: 40rpx;
}

.fixed_nv {
  text-align: center;
  color: #fff;
  font-size: 36rpx;
  line-height: 80rpx;
  position: relative;
}

.back_icon {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
}

.member_container {
  color: #fff;
  background: linear-gradient(0deg, #26272f, #25272f, #1c1c24);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.footNav {
  position: fixed;
  bottom: 0;
  left: 0;
}

.avatar {
  border-radius: 32px;
  width: 90rpx;
  height: 90rpx;
}

.number-content {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 33.33%;
  }

  .box {
    margin: 10rpx;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
  }

  .img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200rpx;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.15);

    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .main_text {
    font-size: 28rpx;
    font-weight: bold;
    color: #b0b0b0;
    background: linear-gradient(0deg, #e1d5c4 0%, #fed4b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .main_view {
    position: absolute;
    left: 0%;
    top: 10%;
    right: 0%;
    bottom: 10%;
    overflow-y: auto;
    padding: 0 10rpx;
    text-align: center;
  }

  .sub_text {
    font-size: 20rpx;
    color: #b0b0b0;
  }
}
</style>
